<!DOCTYPE HTML>
<html lang="en"  xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="author" content="Bootstrap-ecommerce by Vosidiy">

    <title>订单列表</title>

    <link rel="/shortcut icon" type="image/x-icon" href="/images/favicon.ico">

    <!-- jQuery -->
    <script src="/js/jquery-2.0.0.min.js" type="text/javascript"></script>

    <!-- Bootstrap4 files-->
    <script src="/js/bootstrap.bundle.min.js" type="text/javascript"></script>
    <link href="/css/bootstrap.css" rel="stylesheet" type="text/css"/>

    <!-- Font awesome 5 -->
    <link href="/fonts/fontawesome/css/fontawesome-all.min.css" type="text/css" rel="stylesheet">

    <!-- plugin: fancybox  -->
    <script src="/plugins/fancybox/fancybox.min.js" type="text/javascript"></script>
    <link href="/plugins/fancybox/fancybox.min.css" type="text/css" rel="stylesheet">

    <!-- plugin: owl carousel  -->
    <link href="/plugins/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet">
    <link href="/plugins/owlcarousel/assets/owl.theme.default.css" rel="stylesheet">
    <script src="/plugins/owlcarousel/owl.carousel.min.js"></script>

    <!-- custom style -->
    <link href="/css/ui.css" rel="stylesheet" type="text/css"/>
    <link href="/css/responsive.css" rel="stylesheet" media="only screen and (max-width: 1200px)" />

    <!-- custom javascript -->
    <script src="/js/script.js" type="text/javascript"></script>

    <script >
        /// some script

        // jquery ready start
        $(document).ready(function() {
            // jQuery code

        });
        // jquery end
    </script>
</head>
<body>
<header class="section-header">
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <form action="/HTML/userInfo" method="post" name="showUserInfoForm" >
            <a class="navbar-brand" href="javascript:history.go(-1)" name="savesubmit" id="savesubmit"> <img class="logo" src="/images/logo-white.png" th:text="'  '+'订单列表'"></a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar1" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
        </form>

        <div class="collapse navbar-collapse" id="navbar1">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item">
                    <a class="btn ml-2 btn-outline-danger" href="/HTML/relogin">退出登录<span class="sr-only">(current)</span></a>
                </li>
                <li class="new-item">
                    <a class="btn ml-2 btn-outline-success" href="/HTML/home">返回主页</a>
                </li>
                <form action="/HTML/lookOrderList" method="post" name="showUserOrderForm" th:value="${account}">
                    <li class="nav-item">
                        <a class="btn ml-2 btn-outline-primary" href="javascript:showUserOrderForm.submit();">我的订单<span class="sr-only">(current)</span></a>
                    </li>
                </form>
                <li class="nav-item">
                    <a class="btn ml-2 btn-outline-warning" href="javascript:showUserInfoForm.submit();">个人资料</a>
                </li>
            </ul>
        </div>
    </nav>
</header> <!-- section-header.// -->

<section class="section-content bg padding-y-sm">
    <div class="container">
        <div class="card">
            <div class="card-body">
                <div class="row">
                    <div class="col-md-24-24">
                        <strong>
                            【说明】
                        </strong>
                        <br>
                        <strong>
                            ① 订单状态为0表示订单未生效，支付状态为0表示未支付
                        </strong>
                        <br>
                        <strong>
                            ② 退单：订单支付完成但未入住可操作，完成退单后房间空出，支付金额将原路返回至您的支付账户中
                        </strong>
                        <br>
                        <strong>
                            ③ 删除：订单未支付时可操作，订单将被删除，房间会空出，一般在下错单或是不想订时使用此操作
                        </strong>
                        <br>
                        <strong>
                            ④ 退房：住房结束后可操作，表示您已离开房间，操作成功后此订单完成
                        </strong>
                    </div> <!-- col.// -->
                </div> <!-- row.// -->
            </div> <!-- card-body .// -->
        </div> <!-- card.// -->
        <hr>
        <div class="row-sm " >
            <div class="col-md-3 col-sm-6"th:each="order,orderIndex: ${orders}">
                <figure class="card card-product ">
                    <!--这里原来是img-wrap-->
                    <div class="card" th:each="hotel,hotelIndex:${hotels}" th:if="${hotelIndex.index}eq${orderIndex.index}">
                        <img class="img-top" th:src="@{${hotel.photo1}}" >
                    </div>
                    <form action="/HTML/orderHome" method="post" >
                    <div class="box">
                        <dl>
                            <!--酒店名字太长，显示省略号-->
                            <dt th:text="${order.hotelName}" class="text-primary" style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis"></dt>
                        </dl>
                        <dl class="dlist-inline">
                            <dt>订单号</dt>
                            <dd th:text="${order.orderId}"></dd>
                        </dl>
                        <dl class="dlist-inline">
                            <dt>房间类型</dt>
                            <dd th:text="${order.roomType}"></dd>
                        </dl>
                        <dl class="dlist-inline">
                            <dt>入住人数</dt>
                            <dd th:text="${order.inNumber}+'人'"></dd>
                        </dl>
                        <dl class="dlist-inline">
                            <dt>入住</dt>
                            <dd th:text="${order.inTime}"></dd>
                        </dl>
                        <dl class="dlist-inline">
                            <dt>退房</dt>
                            <dd th:text="${order.outTime}"></dd>
                        </dl>
                        <dl class="dlist-inline">
                            <dt>支付状态</dt>
                            <dd th:text="${order.paymentStatus}" id="paymentstatus"></dd>
                        </dl>
                        <dl class="dlist-inline">
                            <dt>订单状态</dt>
                            <dd th:text="${order.orderStatus}" th:value="${order.orderStatus}"  id="orderstatus"></dd>
                            <input type="hidden" name="orderId" th:value="${order.orderId}">
                            <button  class="btn btn-link " type="submit" style="float: right">查看订单详情</button>
                        </dl>

                    </div> <!-- box.// -->
                    </form>

                    <figcaption class="info-wrap">
                        <!--<a href="#" class="title">Good item name</a>-->
                        <div class="price-wrap">
                            <center>
                            <table>
                            <thead>
                            <th>
                                <form action="/HTML/alipayForOrder" method="post" style="float: left">
                                    <input type="hidden" th:value="${order.orderId}" name="orderId" id="payorder">
                                    <button  class="btn btn-outline-success " type="submit">支付</button>
                                </form>
                            </th>
                            <th>
                                <form action="/HTML/deleteOrder" method="post" >
                                    <input type="hidden" th:value="${order.orderId}" name="orderId" id="delectorder">
                                    <button  class="btn btn-outline-danger " type="submit"
                                             th:onclick="return confirmDelect([[${order.paymentStatus}]],[[${order.orderStatus}]])">删除</button>
                                </form>
                            </th>
                            <th>
                                <form action="/HTML/alipayRefund" method="post" >
                                    <input type="hidden" th:value="${order.orderId}" name="orderId" id="refundorder">
                                    <button  class="btn btn-outline-warning " type="submit"
                                             th:onclick="return confirmRefund([[${order.paymentStatus}]],[[${order.orderStatus}]])">退单退钱</button>
                                </form>
                            </th>
                            <th>
                                <form action="/HTML/overOrder" method="post">
                                    <input type="hidden" th:value="${order.orderId}" name="orderId"  id="overoreder">
                                    <button  class="btn btn-outline-primary " type="submit"
                                             th:onclick="return confirmOverOrder([[${order.paymentStatus}]],[[${order.orderStatus}]])">退房</button>
                                </form>
                            </th>
                            <th>
                            </thead>
                            </table>
                            </center>
                        </div>
                    </figcaption>
                </figure>
            </div>
        </div>
    </div>
</section>
<!-- ========================= FOOTER ========================= -->
<footer class="section-footer bg-dark white">
    <div class="container">
        <section class="footer-bottom row">
            <div class="col-sm-6">
                <p> 四川大学实训项目 <br>  第六组作品</p>
            </div>
            <div class="col-sm-6">
                <p class="text-sm-right">
                    2019 · 7 · 8 <br>
                    中国 · 成都
                    <!--<a href="http://bootstrap-ecommerce.com">Bootstrap-ecommerce UI kit</a>-->
                </p>
            </div>
        </section> <!-- //footer-top -->
    </div><!-- //container -->
</footer>
<script type="text/javascript" th:inline="javascript">
   function getOrderStatus(id) {
       document.getElementById(id).setAttribute("text","订单已完成");
   }
   function confirmDelect(paymentS,orderS) {
       var r = confirm("此操作将删除此订单且不可复原，确定删除吗？")
       if (r == true) {
            if((paymentS=="0"&&orderS=="0")||(paymentS==0&&orderS==0)) {
               alert("删除成功");
               return true;
           }
           else if((paymentS=="1"&&orderS=="2")||(paymentS==1&&orderS==2)){
               alert("删除成功");
               return true;
           }
           else if(paymentS=="1"||paymentS==1){
                alert("此订单已支付且未完成，不能删除");
                return false;
            }
            else{
                alert("不满足删除条件：订单状态和支付状态为0和0，或为1和2时才可删除");
                return false;
            }
       }
       else {
           alert("取消删除");
           return false;
       }
   }
   function confirmRefund(paymentS,orderS) {
       var r = confirm("此操作将退单且不可复原，资金将原路返回至您的账户，确定退单吗？")
       if(r==true) {
           if ((paymentS == "1" && orderS == "0") || (paymentS == 1 && orderS == 0)) {
               alert("退单成功");
               return true;
           }
           else if((paymentS == "1" && orderS == "1") || (paymentS == 1 && orderS == 1)){
                   alert("已支付且订单已办理入住，不能退单退款");
                   return false;
               }
           else if((paymentS == "1" && orderS == "2") || (paymentS == 1 && orderS == 2)){
                   alert("订单已完成，不能退单退款");
                   return false;
           }
           else if(paymentS == "0"||paymentS == 0){
               alert("订单未支付，不能退单退款");
               return false;
           }
       }
       else {
           alert("取消退单");
           return false;
       }
   }
   function confirmOverOrder(paymentS,orderS) {
       var r = confirm("此操作将完成订单，表示您已经在前台办理退房手续，确认退房吗？")
       if(r==true) {
           if ((paymentS == "1" && orderS == "1") || (paymentS == 1 && orderS == 1)) {
               alert("完成订单！感谢您对本酒店的信赖");
               return true;
           }
           else if((paymentS == "1" && orderS == "2") || (paymentS == 1 && orderS == 2)){
               alert("此订单已经结束啦");
               return false;
           }
           else if((paymentS == "1" && orderS == "0") || (paymentS == 1 && orderS == 0)){
               alert("虽然您支付了，但是您还没有入住哦");
               return false;
           }
           else if(paymentS == "0"||paymentS == 0){
               alert("您好，您未入住，不能退房哦");
               return false;
           }
       }
       else {
           alert("取消操作");
           return false;
       }
   }
</script>
</body>
